<script setup>
import { ref } from 'vue';
const props = defineProps(['getFunction', 'getParams'])

const animation = { content: ref('获取验证码'), isDisabled: ref(false) }

function startTimer() {
    animation.isDisabled.value = true;
    
    // timer
    let time = 30;
    const id = setInterval(() => {
        if (time >= 0) {
            animation.content.value = `重新获取验证码（${time}）`;
            time--;
        }
    }, 1000)
    setTimeout(() => {
        clearInterval(id)
        animation.content.value = "获取验证码"
        animation.isDisabled.value = false;
    }
        , 30000)
}

function handleClick() {
    if (props.getFunction == undefined || animation.isDisabled.value) {
        return ;
    }
    props.getParams === undefined ? props.getFunction.call({startTimer}) : props.getFunction.call({startTimer}, props.getParams);
}

</script>

<template>
    <div class="button" @click="handleClick" :class="{disabled: animation.isDisabled.value}" >
        {{ animation.content.value }}
    </div>
</template>
<style scoped >
.button {
    display: inline-block;
    /* width: 70px; */
    height: 30px;
    border-radius: 5px;
    color: #303133;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    margin: 0 10px;
    border: 1px solid #303133;
}

.button:hover {
    opacity: 0.8;
}

.button:active {
    transform: translateY(3px);
}

.button.disabled {
    background-color:#a0cfff !important; 
    cursor: not-allowed;
}
</style>